<template>
    <div class="com-study-calendar" :class="fixed ? 'fixed' : ''">
        <div class="month-ctrl">
            <van-icon name="arrow-left" class="abs-left" @click="goUser" />
            <button type="default" icon="arrow-left" size="mini" @click="pre" :disabled="disablePreMonthCtrl"></button>
            <span>{{ calendarYear }}年{{ calendarMonth + 1 }}月</span>
            <button type="default" icon="arrow" size="mini" @click="next" :disabled="disableNextMonthCtrl"></button>
            <button type="primary" size="mini" class="abs-btn" @click="back">返回今日</button>
        </div>
        <div class="week-title">
            <div class="week-each" v-for="(item, index) in weeks" :key="index">{{ item }}</div>
        </div>
        <div class="day-wrap">
            <div class="day-each" :class="'week_' + Math.ceil(index / 7)" v-for="index of currentEmptyDays"></div>
            <div class="day-each" v-for="index of currentMonthDays"
            :class="[
            isCurrentDay(index) ? 'current' : '',
            showoverdue(index)? 'overdue-tip' : '',
            showTips(index) ? 'has-tip' : '',
            disableDays(index) ? 'disabled' : '',
            isToday(index) ? 'today' : '',
            'week_' + Math.ceil((currentEmptyDays + index) / 7)
            ]">
                <span @click="clickDay(index)">{{ isToday(index) ? '今' : index }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import { weeks } from '@/assets/js/constant'
import { dateFormat } from '@/assets/js/util'
import vanIcon from "@/components/vant/van-icon/van-icon.vue"
export default {
	components:{
		vanIcon
	},
    data() {
        return {
            weeks: weeks,
            calendarMonth: 0,
            calendarYear: 0,
            currentDay: ''
        }
    },

    props: {
        currentYear: {
            type: Number,
            default: new Date().getFullYear()
        },
        currentMonth: {
            type: Number,
            default: new Date().getMonth()
        },
        today: {
            type: String,
            default: () => dateFormat('', 'yyyy-MM-dd')
        },
        tipsDays: {
            type: Array,
            default: () => []
        },
        overdueDays:{
            type: Array,
            default: () => []
        },
        dateRange: {
            type: Array,
            default: () => []
        },
        fixed: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        fixed(val) {
            let dayEles = [... $('.day-wrap .day-each')]
            if (val) {
                let className = $('.day-wrap .current').attr('class')
                let weekClass = className ? className.split(' ').find(item => item.indexOf('week') > -1) : 'week_1'
                dayEles.forEach(item => {
                    if (!$(item).hasClass(weekClass)) {
                        $(item).hide(400)
                    }
                })
            } else {
                dayEles.forEach(item => {
                    $(item).show(400)
                })
            }
        }
    },
    mounted() {
        this.calendarYear = this.currentYear
        this.calendarMonth = this.currentMonth
        this.currentDay = this.today
    },
    computed: {
        // 当月总天数
        currentMonthDays() {
            console.log("new Date(this.calendarYear, this.calendarMonth + 1, 0).getDate()",new Date(this.calendarYear, this.calendarMonth + 1, 0).getDate())
            return new Date(this.calendarYear, this.calendarMonth + 1, 0).getDate()
        },
        // 当月第一天是周几
        currentMonthFirstDay() {
            return new Date(this.calendarYear, this.calendarMonth, 1).getDay()
        },
        // 月初始前几天
        currentEmptyDays() {
            if (this.currentMonthFirstDay) {
                return this.currentMonthFirstDay - 1
            } else {
                return 6
            }
        },
        // 是否允许切换日历月份
        disablePreMonthCtrl() {
            if (this.dateRange && this.dateRange.length > 0) {
                if (new Date(this.dateRange[0]).getMonth() > this.calendarMonth - 1) {
                    return true
                }
                return false
            }
            return false
        },
        disableNextMonthCtrl() {
            if (this.dateRange && this.dateRange.length > 1) {
                if (new Date(this.dateRange[1]).getMonth() < this.calendarMonth + 1) {
                    return true
                } 
                return false
            }
            return false
        }
    },
    methods: {
        dayStr(day) {
            let month = (this.calendarMonth + 1) < 10 ? '0' + (this.calendarMonth + 1) : (this.calendarMonth + 1);
            day = day < 10 ? '0' + day : day
            return this.calendarYear + '-' + month + '-' + day
        },

        isToday(day) {
            return this.dayStr(day) === this.today
        },

        isCurrentDay(day) {
            return this.dayStr(day) === this.currentDay
        },

        showTips(day) {
            return this.tipsDays.indexOf(this.dayStr(day)) > -1
        },
        showoverdue(day) {
            return this.overdueDays.indexOf(this.dayStr(day)) > -1
        },
        disableDays(day) {
            if (this.dateRange && this.dateRange.length > 0) {
                let firstDay = this.dateRange[0],
                    lastDay = this.dateRange.length > 1 ? this.dateRange[1] : ''
                if (new Date(this.dayStr(day)).getTime() < new Date(firstDay).getTime() || (lastDay && new Date(this.dayStr(day)).getTime() > new Date(lastDay).getTime())) {
                    return true
                }
            }
            return false
        },

        clickDay(day) {
            if (!this.disableDays(day)) {
                this.currentDay = this.dayStr(day)
                this.$emit('day-click', this.dayStr(day))
            }
        },

        next() {
            if (this.calendarMonth === 11) {
                this.calendarYear++
                this.calendarMonth = 0
            } else {
                this.calendarMonth ++
            }
            this.$emit('month-click')
        },

        pre() {
            if (this.calendarMonth === 0) {
                this.calendarYear--
                this.calendarMonth = 11
            } else {
                this.calendarMonth --
            }
            this.$emit('month-click')
        },

        back() {
            this.calendarMonth = this.currentMonth
            this.calendarYear = this.currentYear
            this.currentDay = this.today
            this.$emit('day-click', this.today)
        },

        goUser() {
            uni.navigateBack({ delta: 1 })
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/static/css/variable.scss';
.com-study-calendar {
    text-align: center;
    padding-bottom: 10px;
    &.fixed {
        position: fixed;
        z-index: 2;
        background: #fff;
        width: 100%;
		padding-top: var(--status-bar-height);
    }
    .month-ctrl {
        position: relative;
        padding: 0 0 10px 0;
        border-bottom: 1px solid #eee;
        .abs-left {
            font-size: 18px;
            position: absolute;
            left: 14px;
            top: 14px;
        }
        span {
            display: inline-block;
            vertical-align: -6px;
            margin: 0;
            font-size: 16px;
        }
        .abs-btn {
            position: absolute;
            right: 5px;
            top: 5px;
            :deep(.van-button__text){
                font-size: 12px;
            }
        }
    }
    .week-title {
        display: flex;
        color: #999;
        font-size: 14px;
        .week-each {
            flex: 0 0 14.2857142857%;
        }
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .day-wrap {
        display: flex;
        flex-wrap: wrap;
        .day-each {
            flex: 0 0 14.2857142857%;
            padding: 5px 0;
            color: #666;
            font-size: 14px;
            &.disabled {
                span {
                    color: #BBB;
                    cursor: not-allowed;
                }
            }
            &.has-tip {
                span {
                    position: relative;
                    &::after {
                        content: ' ';
                        width: 6px;
                        height: 6px;
                        background: $primaryColor;
                        border-radius: 50%;
                        position: absolute;
                        bottom: -2px;
                        left: 13px;
                    }
                }
            }
            &.overdue-tip {
                span {
                    position: relative;
                    &::before {
                        content: "逾";
    /* width: 6px;
    height: 6px; */
    font-size: 12px;
    color: red;
    /* background: red; */
    border-radius: 50%;
    position: absolute;
    right: -5px;
    top: -7px;
    transform: scale(0.8);
                    }
                }
            }
            &.today {
                span {
                    color: $primaryColor;
                }
            }
            &.current {
                span {
                    background: $primaryColor;
                    color: #fff !important;
                    border-radius: 50%;
                    &::after {
                        bottom: -9px;
                    }
                }
            }
            span {
                cursor: pointer;
                width: 30px;
                height: 30px;
                line-height: 30px;
                display: inline-block;
            }
        }
    }
}
</style>